<template>
<!-- 前往发放 -->
   <div>
        <el-row>
           <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <span style="position: relative;top:20px;left:20px;font-size:18px">技术部9月薪资方案</span>
                    <span style="position: relative;top:20px;left:35px;font-size:14px;color:#909399">计薪周期：2035/09/01~09/30</span>
                    <br/><br/>
                    <el-row :gutter="0">
                        <el-col :span="4">
                            <div :class="1 == number ? 'bg-purple-active':'bg-purple'" @click="tab(1)">
                                <br/>
                                <span style="font-size:30px;margin-left:30px;">69人</span>
                                <br/>
                                <span style="font-size:15px;margin-left:30px;color:#909399">计薪人数</span>
                            </div>
                        </el-col>
                        <el-col :span="4">
                          <div :class="2 == number ? 'bg-purple-active':'bg-purple'" @click="tab(2)">
                                <br/>
                                <span style="font-size:30px;margin-left:30px;">8人</span>
                                <br/>
                                <span style="font-size:14px;margin-left:30px;color:#909399">本月新入职</span>
                          </div>
                        </el-col>
                        <el-col :span="4">
                          <div :class="3 == number ? 'bg-purple-active':'bg-purple'" @click="tab(3)">
                                <br/>
                                <span style="font-size:30px;margin-left:30px;">3人</span>
                                <br/>
                                <span style="font-size:14px;margin-left:30px;color:#909399">本月离职</span>
                          </div>
                        </el-col>
                        <el-col :span="4">
                          <div :class="4 == number ? 'bg-purple-active':'bg-purple'" @click="tab(4)">
                                <br/>
                                <span style="font-size:30px;margin-left:30px;">5人</span>
                                <br/>
                                <span style="font-size:14px;margin-left:30px;color:#909399">本月调薪</span>
                          </div>
                        </el-col>
                        <el-col :span="4">
                          <div :class="5 == number ? 'bg-purple-active':'bg-purple'" @click="tab(5)">
                                <br/>
                                <span style="font-size:30px;margin-left:30px;">58人</span>
                                <br/>
                                <span style="font-size:14px;margin-left:30px;color:#909399">正式员工</span>
                          </div>
                        </el-col>
                        <el-col :span="4">
                          <div :class="6 == number ? 'bg-purple-active':'bg-purple'" @click="tab(6)">
                                <br/>
                                <span style="font-size:30px;margin-left:30px;">11人</span>
                                <br/>
                                <span style="font-size:14px;margin-left:30px;color:#909399">试用期</span>
                          </div>
                        </el-col>
                        </el-row>
                        <el-row style="padding-left:20px;padding-top:30px;">
                        <el-button type="primary">导出</el-button>
                        <el-button>批量发送</el-button>
                        <el-button>批量撤回</el-button>
                        </el-row>
                        <el-form  label-width="1090px" style="margin-top:-55px;">
                        <el-form-item label="关键词">
                            <el-input v-model="form.name" style="width:200px;" placeholder="请输入关键词"></el-input>
                        </el-form-item>
                        </el-form>
                </div>
            </el-col>
        </el-row>
        <el-row>
           <el-col :span="24">
                <div class="grid-content bg-purple-dark-two" style="padding-left:25px;padding-top:20px;">
                    <el-table
                      :data="tableData"
                      :header-cell-style="{background: '#f4f4f4'}"
                      border
                      style="width: 98%">
                      <el-table-column align="center" type="selection" width="55"></el-table-column>
                      <el-table-column align="center" prop="name" label="姓名" ></el-table-column>
                      <el-table-column align="center" prop="name" label="部门" ></el-table-column>
                      <el-table-column align="center" prop="name" label="职位"></el-table-column>
                      <el-table-column align="center" prop="name" label="手机号" width="150"></el-table-column>
                      <el-table-column align="center" prop="name" label="工号"></el-table-column>
                      <el-table-column align="center" prop="name" label="发送状态"></el-table-column>
                      <el-table-column align="center" prop="name" label="查看状态"></el-table-column>
                      <el-table-column align="center" prop="name" label="确认状态"></el-table-column>
                      <el-table-column
                        fixed="right"
                        label="操作">
                        <template slot-scope="scope">
                          <el-button @click="handleClick(scope.row)" type="text">发送</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                      <div style="padding-left:825px;padding-top:20px;">
                        <el-pagination
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="pageNum"
                          :page-sizes="[5, 10, 20, 50]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="total"
                        >
                        </el-pagination>
                      </div>
                </div>
            </el-col>       
        </el-row>
   </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            form:{},
            number:"0",
            tableData: [],
            pageNum: 1,
            pageSize: 5,
            total: 0,
        }
    },
    created(){
     
    },
    methods: {
        tab(index){
         this.number=index
        },
         //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
          this.pageSize = val;
          this.findSalaryByIdList();
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
          this.pageNum = val;
          this.findSalaryByIdList();
        },
    }

}
</script>

<style scoped>
   .el-row {
    margin-bottom: 15px;
    
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: white;
    height: 240px;
  }
  .bg-purple-dark-two {
    background: white;
    height: 500px;
  }
  .bg-purple {
    border-radius: 4px;
    min-height: 36px;
    border: 1px solid #c4c6c9;
    margin-left: 13px;
    position: relative;
    top: 20px;
    width: 190px;
    height: 95px;
  }
  .bg-purple-active{
    border-radius: 4px;
    min-height: 36px;
    border: 1px solid #6d9de5;
    margin-left: 13px;
    position: relative;
    top: 20px;
    width: 190px;
    height: 95px;
    color: #6d9de5;
  }
</style>